<template>
  <div class="shelf-item"
       :class="{'shelf-item-shadow': data.type === 1 || data.type === 2}"
       @click="onItemClick">
    <component
      class="shelf-item-component"
      :class="{'is-edit': isEditMode && data.type === 2}"
      :is="item"
      :data="data"></component>
    <div class="shelf-item-select-icon iconfont"
         :class="{'is-selected': data.selected}"
         v-show="isEditMode && data.type === 1">&#xe620;</div>
  </div>
</template>

<script>
import { storeShelfMixin } from '../../utils/mixin'
import ShelfBook from './ShelfItemBook'
import ShelfCategory from './ShelfItemCategory'
import ShelfAdd from './ShelfItemAdd'
import { gotoStoreHome } from '../../utils/store'

export default {
  name: 'ShelfItem',
  mixins: [storeShelfMixin],
  props: {
    data: Object
  },
  computed: {
    item () {
      return this.data.type === 1 ? this.book : (this.data.type === 2 ? this.category : this.add)
    }
  },
  data () {
    return {
      book: ShelfBook,
      category: ShelfCategory,
      add: ShelfAdd
    }
  },
  methods: {
    onItemClick () {
      // 进入编辑模式后
      if (this.isEditMode) {
        // 进入编辑模式后，点击图书改变选择状态,this.data是当前书本的数据
        if (this.data.type === 1) {
          this.data.selected = !this.data.selected
          // 当图书是选择状态
          if (this.data.selected) {
            // 防止重复推送
            this.shelfSelected.pushWithoutDuplicate(this.data)
          } else {
            // 删除数组的元素，使用筛选返回新数组
            this.setShelfSelected(this.shelfSelected.filter(item => item.id !== this.data.id))
          }
        }
      } else {
        if (this.data.type === 1) {
          // 跳转到相应的图书详情
          this.showBookDetail(this.data)
        } else if (this.data.type === 2) {
          // 跳转到相应的页面
          this.$router.push({
            path: '/store/category',
            query: {
              title: this.data.title
            }
          })
        } else {
          // 返回首页
          gotoStoreHome(this)
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .shelf-item
    position: relative
    width: 100%
    height: 100%
    &.shelf-item-shadow
      box-shadow: px2rem(2) px2rem(2) px2rem(6) px2rem(2) rgba(200, 200, 200, .3)
    .shelf-item-component
      opacity: 1
      &.is-edit
        opacity: .5
    .shelf-item-select-icon
      position: absolute
      bottom: px2rem(2)
      right: px2rem(2)
      font-size: px2rem(19)
      color: rgba(0, 0, 0, .4)
      &.is-selected
        color: $color-blue
</style>
